@page "/components/button"

<DocsPage>
    <DocsPageHeader Title="Button"
                    SubTitle="A Material Design Button for actions, links and commands">
        <Description>The <CodeInline>Mudbutton</CodeInline> component is a button with material design theme and comes with multiple functions.</Description>
    </DocsPageHeader>
    <DocsPageContent>
        
        <DocsPageSection>
            <SectionHeader Title="Filled Buttons">
                <Description>Filled Buttons have elevation (box shadow) and is raised on click by default.</Description>
            </SectionHeader>
            <SectionContent Code="ButtonFilledExample">
                <ButtonFilledExample/>
            </SectionContent>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Elevation">
                        <Description>Elevation can be removed with the <CodeInline>DisableElevation</CodeInline> bool.<CodeInline>Color</CodeInline> property only applies to the text.</Description>
                    </SectionHeader>
                    <SectionContent Code="ButtonElevationExample">
                        <ButtonTextExample/>
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Text Buttons">
                <Description>Text Buttons have no elevation, background or border and only hover effect is used. The <CodeInline>Color</CodeInline> property only applies to the text.</Description>
            </SectionHeader>
            <SectionContent Code="ButtonTextExample">
                <ButtonTextExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Outlined Buttons">
                <Description>Outlined Buttons are similar to Text Buttons except for the border that inherits its color from the set <CodeInline>Color</CodeInline> property.</Description>
            </SectionHeader>
            <SectionContent Code="ButtonOutlinedExample">
                <ButtonOutlinedExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="FullWidth">
                <Description>FullWidth buttons extend to 100% of available width.</Description>
            </SectionHeader>
            <SectionContent Code="ButtonFullWidthExample">
                <ButtonFullWidthExample/>
            </SectionContent>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Icons and labels">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="ButtonIconLabelExample">
                <ButtonIconLabelExample/>
            </SectionContent>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Sizes">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="ButtonSizeExample" ShowCode="false">
                <ButtonSizeExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Customized Buttons">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="ButtonCustomizedExample" ShowCode="false">
                <ButtonCustomizedExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Link Button">
                <Description>Set the <CodeInline>Link</CodeInline> parameter and the MudButton will render an anchor element. If you also set the <CodeInline>Target</CodeInline> parameter to <CodeInline>_blank</CodeInline>, the component will add <CodeInline>rel="noopener"</CodeInline> automatically.
                    If you set the <CodeInline>Disabled</CodeInline> parameter to <CodeInline>true</CodeInline>, the component will render a button with no <CodeInline>href</CodeInline> attribute.
                </Description>
            </SectionHeader>
            <SectionContent Code="ButtonLinkExample" ShowCode="false">
                <ButtonLinkExample/>
            </SectionContent>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Loading Button">
            </SectionHeader>
            <SectionContent Code="ButtonLoadingExample" ShowCode="false">
                <ButtonLoadingExample/>
            </SectionContent>
        </DocsPageSection>
        
    </DocsPageContent>
</DocsPage>